<template>
  <q-layout class="bg-panda-base-light box">
    <div>
      <div class="cont q-gutter-lg" style="width:500px;">
        <div class="algin-center text-panda-text-dark q-ma-md line-height-60px">
          <img
            src="statics/icon_img/panda.png"
            alt
            style="    width: 24px;border-radius: 24px;height: 24px;vertical-align: middle;"
          />
          熊猫后台管理系统
        </div>
        <div class="q-ma-md text-panda-text-dark">
          <q-input
            outlined
            v-model="login_form.userName"
            color="panda-text-light"
            bg-color="panda-light-light"
            @focus="input_focus"
          >
            <template v-slot:before>
              <span class="text-panda-text-dark">账户：</span>
            </template>
          </q-input>
          <!-- <span>该账户不存在！</span> -->
        </div>
        <div class="q-ma-md text-panda-text-dark">
          <q-input
            outlined
            v-model="login_form.passWord"
            color="panda-text-light"
            bg-color="panda-light-light"
            @focus="input_focus"
            :type="isPwd ? 'password' : 'text'"
          >
            <template v-slot:before>
              <span class="text-panda-text-dark">密码：</span>
            </template>
            <template v-slot:append>
              <q-icon
                :name="isPwd ? 'visibility_off' : 'visibility'"
                class="cursor-pointer"
                @click="isPwd = !isPwd"
              />
            </template>
          </q-input>
          <!-- <span>密码错误！</span> -->
        </div>
        <div class="q-ma-md text-panda-text-dark row justify-between">
          <q-checkbox v-model="save_name" label="记住账号" />
          <q-space />
          <span class="q-mx-sm panda-btn-table-handle" @click="when_forget_password">忘记密码</span>
        </div>
        <div class="error" v-if="show_login_failed">{{error_msg}}</div>
        <div class="algin-center">
          <q-btn
            type="primary"
            @click="login_form_submit"
            :disabled="!form_submitbutton_can_click"
            class="text-panda-text-dark bg-panda-light-light"
          >登录</q-btn>
        </div>
      </div>
    </div>
  </q-layout>
</template>
<style lang="stylus" scoped>
.box {
  display: flex;
  width: 100%;
  height: 100%;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  position: fixed;
  background: #ccc;
  text-align: center;

  .cont {
    min-height: 200px;
    flex-grow: 1;

    .line-height-60px {
      line-height: 60px;
      font-size: 2em;
    }
  }
}
</style>
<script>
import { api_admin } from "src/api/index.js";
import { mapActions } from "vuex";
export default {
  data() {
    return {
      error_msg: "",
      isPwd: true,
      save_name: false,
      login_form: {
        userName: "",
        passWord: ""
      },
      show_login_failed: false,
      form_submitbutton_can_click: true
    };
  },
  props: [],
  created() {
    this.init_form();
  },
  methods: {
    ...mapActions({
      set_account: "set_account"
    }),
    init_form() {
      this.error_msg = "";
      //   this.remove_cookie("accunt_info");
      let accunt_name = this.$q.cookies.get("accunt_name");
      this.$q.cookies.remove("accunt_info");
      this.show_login_failed = false;
      this.login_form = {
        // userName: accunt_name,
        userName: "root",
        passWord: "123456"
      };
    },
    input_focus() {
      if (this.show_login_failed) {
        this.init_form();
      }
    },
    when_forget_password() {
      let message = "忘记密码，请联系管理员或直属上级。";
      this.$q.dialog({
        title: "",
        message: message,
        html: true,
        persistent: true,
        ok: {
          label: "确定"
        }
      });
    },
    login_form_submit() {
      this.$router.push({
        name: "match_resource"
      });
      return false;
      this.form_submitbutton_can_click = false;
      let params = {
        ...this.login_form
      };
      api_admin.post_login(params).then(res => {
        this.form_submitbutton_can_click = true;
        //    let data=this.$lodash.get(res, 'res.data.data')
        let code = this.$lodash.get(res, "data.code") || "";
        console.log(code);

        // return false
        if (code == 200) {
          let data = this.$lodash.get(res, "data.data") || "";
          console.log("用户信息");
          console.log(data);
          //   this.set_cookie("accunt_info", JSON.stringify(data), 999);
          if (this.save_name) {
            this.$q.cookies.set("accunt_name", this.login_form.userName);
          }
          this.$q.cookies.set("accunt_name", this.login_form.userName);
          this.$q.cookies.set("accunt_info", JSON.stringify(data), {
            expires: 999,
            path: "/"
          });

          this.set_account(data);
          this.$router.push({
            name: "match_resource"
          });
        } else {
          this.show_login_failed = true;
          this.error_msg = this.$lodash.get(res, "data.msg") || "";
        }
      });
    }
  },
  watch: {}
};
</script>

